<template>
    <div class="d1">
        <!-- {{sb}} -->
        <div class="d2" v-for="(item,index) in da1" :key="item.name">
            <p style="margin:5%">{{item.name}}</p>
            <div class="d3" @click="dj(da1[0].id)" style="margin:%;width:100%;height: 100%; " >
                <div class="d3-1" style="border: 0px solid red;text-align: center;background-color: white; float: left;" v-for="item2 in item.cname" :key="item2">
                    <img src="https://img2.baidu.com/it/u=1835843610,1575206394&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=999" alt="">
                    <p style="font-size:12px">{{item2}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, onBeforeUpdate, onMounted, onUpdated, reactive, ref } from "@vue/runtime-core";
import { inject } from "vue";
import emitter from "@/Untils/bus.js"
import bus from 'vue3-eventbus'
import axios from "axios"
let da=reactive([])
let da1=reactive([])
let bel=ref(true)

let props=defineProps(['num'])
// console.log(props.num);
// let sb=inject("suibian",'2154')
// console.log(sb);
let dj=function(vp){
    // console.log(vp);

}
let abb=ref(1)
// bus.on("foo",function(aa:any){
//         abb.value=aa
//     })
    onMounted:{
        // getUPList(abb.value)
        bus.on("foo",function(aa:any){
            // if(aa!=0){
                axios.get("https://console-mock.apipost.cn/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/cate")
                .then(res=>{
                    da1.push({id:res.data[aa].id})
                    res.data[aa].child.forEach((item,index) => {
                            da1.push({name:item.name,cname:item.data})
                    });
                })
                // console.log("传参过来了",da1);

            // }
        })
        
    }
        
</script>

<style scoped>
    .d1{width: 100%;background-color: #eae9e5;margin-top: 20%;}
    body,html{background-color: #eae9e5;}
    img{width: 50%;height: 20%;}
    .d3-1{width: 27%;height: 20%;margin: 1%;}
    .d2{background: #eae9e5;float: left;}
</style>